import {
    View,
    ScrollView,
    Text,
    StyleSheet,
    TouchableOpacity,
    Image,
    Animated,
    RefreshControl,
    Button,
    ViewPropTypes, StyleProp, ViewStyle, TextStyle
} from 'react-native'
import React, {Component} from 'react'
import {screenWidth} from "../../style";

const PropTypes = require('prop-types');

/***
 * 滚动可以超出一屏
 */
class CategoryBar extends Component {
    constructor(props) {
        super(props);
    }

    public props: {
        itemWidth?: number,
        activeTextColor?: string,
        inactiveTextColor?: string,
        textColor?: string,
        textStyle?: StyleProp<TextStyle>,
        scrollValue?: Animated.Value,
        separatorMargin?: number,
        underlineStyle?: StyleProp<ViewStyle>,
        style?: StyleProp<ViewStyle>,
        tabs?: Array<any>,
        renderTab?: any,
        activeTab?: any,
        goToPage?: any,
        backgroundColor?: string,
        tabStyle?: StyleProp<TextStyle>
    };
    public refs: {
        tabScrollView: any
    };
    static propTypes = {
        goToPage: PropTypes.func,
        activeTab: PropTypes.number,
        //会从ScrollableTabView中拿到
        tabs: PropTypes.array,
        backgroundColor: PropTypes.string,
        activeTextColor: PropTypes.string,
        inactiveTextColor: PropTypes.string,
        textStyle: PropTypes.object,
        tabStyle: PropTypes.object,
        renderTab: PropTypes.func,
        underlineStyle: PropTypes.object,
        //底部线的外边距
        separatorMargin: PropTypes.number
    };

    static defaultProps = {
        activeTextColor: 'navy',
        inactiveTextColor: 'black',
        backgroundColor: null,
        separatorMargin: 0
    };


    _tabPress = (pressHandle, page) => _ => {
        const itemWidth = this.props.itemWidth;
        const numberOfTabs = this.props.tabs.length;
        let containerWidth = itemWidth * numberOfTabs;
        //第几个正好居中,选居中的前一个元素
        /***
         * centerNum控制当选中哪个元素时滚动列表
         */
        const centerNum = Math.floor((screenWidth / itemWidth) / 2)+1 ;
        console.log((screenWidth / itemWidth) / 2);
        let targetScrollNum = (page - centerNum) * itemWidth;
        if(targetScrollNum<0)targetScrollNum=0;

        const maxScrollArea = containerWidth-screenWidth;
        if(maxScrollArea>0&&targetScrollNum>maxScrollArea)targetScrollNum=maxScrollArea;
        requestAnimationFrame(_ => {
            this.refs.tabScrollView.scrollTo({x:targetScrollNum, y: 0, animated: true});
            pressHandle(page);
        });
    };

    _renderTab = (name, page, isTabActive, onPressHandler) => {

        const {activeTextColor, inactiveTextColor, textStyle,} = this.props;
        const textColor = isTabActive ? activeTextColor : inactiveTextColor;
        return <TouchableOpacity
            style={{flex: 1}}
            key={name}
            accessible={true}
            activeOpacity={.8}
            accessibilityLabel={name}
            accessibilityTraits='button'
            onPress={this._tabPress(onPressHandler, page)}
        >
            <View style={[styles.tab, this.props.tabStyle]}>
                <Text style={[{color: textColor}, textStyle]}>
                    {name}
                </Text>
            </View>
        </TouchableOpacity>;
    }


    render() {
        const numberOfTabs = this.props.tabs.length;
        let containerWidth = this.props.itemWidth * numberOfTabs;
        containerWidth = containerWidth > screenWidth ? containerWidth : screenWidth;
        const separatorMargin = this.props.separatorMargin;
        const tabUnderlineStyle = {
            position: 'absolute',
            width: containerWidth / numberOfTabs - separatorMargin * 2,
            marginLeft: separatorMargin,
            height: 4,
            backgroundColor: 'navy',
            bottom: 0,
        };

        const translateX = this.props.scrollValue.interpolate({
            inputRange: [0, 1],
            outputRange: [0, containerWidth / numberOfTabs],
        });
        return (
            <View>
                <ScrollView horizontal={true}
                            bounces={false}
                            ref={"tabScrollView"}
                            showsHorizontalScrollIndicator={false}
                            contentContainerStyle={[styles.tabs, {
                                backgroundColor: this.props.backgroundColor,
                                width: containerWidth
                            }, this.props.style]}>
                    {this.props.tabs.map((name, page) => {
                        const isTabActive = this.props.activeTab === page;
                        const renderTab = this.props.renderTab || this._renderTab;
                        return renderTab(name, page, isTabActive, this.props.goToPage);
                    })}
                    <Animated.View
                        style={[
                            tabUnderlineStyle,
                            {
                                transform: [
                                    {translateX},
                                ]
                            },
                            this.props.underlineStyle,
                        ]}
                    />
                </ScrollView>
            </View>
        );
    }

}


const styles = StyleSheet.create({
    tab: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    tabs: {
        height: 50,
        flexDirection: 'row',
        justifyContent: 'space-around',
        borderWidth: 1,
        borderTopWidth: 0,
        borderLeftWidth: 0,
        borderRightWidth: 0,
        borderColor: '#ccc',
    },
});

export default CategoryBar;